<template>
  <div class="category">
    <!-- 表单开始 -->
    <el-form size="small" :inline="true" :model="list" class="demo-form-inline">
      <el-button style="margin-right:.5em;" type="primary" size="small" plain @click="showHandler()">添加</el-button>
      <el-form-item>
        <el-input clearable v-model="list.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select clearable v-model="list.status" placeholder="请选择状态">
          <el-option label="正常" value="正常"></el-option>
          <el-option label="禁用" value="禁用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单结束 -->
    <!-- 表格开始 -->
    <el-table :data="baseUsers" style="width: 100%;font-size: 12px;">
      <el-table-column prop="id" label="编号" align="center"></el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        align="center">
      </el-table-column>
      <el-table-column prop="realname" label="姓名" align="center"></el-table-column>
      <el-table-column prop="telephone" label="手机号" align="center"></el-table-column>
      <el-table-column prop="gender" label="性别" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.gender == null">暂无</div>
          <svg-icon v-if="scope.row.gender === 'female'" icon-class="sex2"/>
          <svg-icon v-if="scope.row.gender === 'male'" icon-class="sex1"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === '正常' ? 'success' : 'danger'"
            disable-transitions>{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center">
        <template slot-scope="scope">
          <el-button @click="editHandler(scope.row)" type="text" size="small">编辑</el-button>
          <el-button style="color:#ffba00;" @click="deleteHandler(scope.row.id)" type="text" size="small">删除</el-button>
          <el-button style="color:red;" @click="xq(scope.row.id)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
    <!-- 分页开始 -->
    <div style="float:right;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 15,20]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 分页结束 -->
    <!-- 模态框开始 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
       <!-- Form开始-->
       {{ruleForm}}
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="ruleForm.realname"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="ruleForm.telephone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input show-password v-model="ruleForm.password"></el-input>
          <!-- <el-inpu1t show-password v-model="ruleForm.password"></el-inpu1t> -->
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- Form结束-->
      <div slot="footer" size="small" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框结束 -->
    <!-- 模态框开始 -->
    <el-dialog :title="title" :visible.sync="dialogFormEdit">
       <!-- Form开始-->
       {{rules}}
      <el-form :model="rules" :rules="rules" ref="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="rules.username"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="rules.realname"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="telephone">
          <el-input v-model="rules.telephone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input show-password v-model="rules.password"></el-input>
          <!-- <el-inpu1t show-password v-model="ruleForm.password"></el-inpu1t> -->
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="rules.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="rules.status">
            <el-radio label="正常"></el-radio>
            <el-radio label="禁用"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- Form结束-->
      <div slot="footer" size="small" class="dialog-footer">
        <el-button @click="dialogFormEdit = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框结束 -->
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'
export default {
  data(){
    return {
      list:{
          page:1,
          pageSize:10,
          roleId:1
        },
      dialogFormVisible: false,
      dialogFormEdit:false,
      title: '添加员工信息',
      currentPage: 1,
      rules: {},
      ruleForm: {
        username: '',
        realname: '',
        telephone: '',
        password: '',
        gender: '',
        roleId:'1',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        realname: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        telephone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
      }
    }
  },
  computed:{
    ...mapState('staff',['baseUsers','total'])
  },
  methods:{
    ...mapActions('staff',['findAllUser','addUser','delete','saveUser']),
    changeHandler(page){
      this.list.page=page;
      this.findAllUser(this.list)
    },
    handleSizeChange(val) {
      this.list.pageSize=val;
      this.findAllUser(this.list)
    },
    handleCurrentChange(val) {
      this.list.page=val;
      this.findAllUser(this.list)
    },
    //编辑栏目信息
    editHandler(data){
      this.title='编辑员工信息'
      this.rules=data;
      console.log(this.rules);
      this.dialogFormEdit=true;
    },
    //删除员工
    deleteHandler(id){
      let params={
        id
      }
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      this.delete(params).then(res=>{
        if(res.status==200){
          this.findAllUser(this.list)
          this.$message({
            type: "success",
            message: res.message
          })
        }else{
            this.$message({
            type: "error",
            message: res.message
          })
        }
      })
      })
    },
    onSubmit(){
      this.findAllUser(this.list)
    },
    showHandler(){
      this.dialogFormVisible=true
    },
    submitForm() {
      this.addUser(this.ruleForm).then(res=>{
        if(res.status==200){
          this.dialogFormVisible=false
          this.findAllUser(this.list)
          this.$message({
            type: "success",
            message: res.message
          })
        }else{
            this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    },
    submitEdit(){
      this.saveUser(this.rules).then(res=>{
        if(res.status==200){
          this.dialogFormEdit=false
          this.findAllUser(this.list)
          this.$message({
            type: "success",
            message: res.message
          })
        }else{
            this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    }
  },
  created(){
    this.findAllUser(this.list)
  }
}
</script>
<style>

</style>